<template>
  <div class="circuit-board-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let circuits = []
let pulses = []

class Circuit {
  constructor(canvas) {
    this.canvas = canvas
    this.nodes = []
    this.connections = []
    this.generateCircuit()
  }

  generateCircuit() {
    // 生成节点
    const nodeCount = Math.floor(Math.random() * 5) + 3
    for (let i = 0; i < nodeCount; i++) {
      this.nodes.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        type: Math.random() > 0.7 ? 'chip' : 'node',
        size: Math.random() * 10 + 5
      })
    }

    // 生成连接
    for (let i = 0; i < this.nodes.length - 1; i++) {
      if (Math.random() > 0.3) {
        this.connections.push({
          from: i,
          to: i + 1,
          type: Math.random() > 0.5 ? 'straight' : 'circuit'
        })
      }
    }

    // 添加一些随机连接
    const randomConnections = Math.floor(Math.random() * 3) + 1
    for (let i = 0; i < randomConnections; i++) {
      const from = Math.floor(Math.random() * this.nodes.length)
      let to = Math.floor(Math.random() * this.nodes.length)
      while (to === from) {
        to = Math.floor(Math.random() * this.nodes.length)
      }
      this.connections.push({
        from,
        to,
        type: 'circuit'
      })
    }
  }

  draw(ctx) {
    // 绘制连接线
    this.connections.forEach(conn => {
      const fromNode = this.nodes[conn.from]
      const toNode = this.nodes[conn.to]

      ctx.strokeStyle = 'rgba(0, 255, 150, 0.3)'
      ctx.lineWidth = 2

      if (conn.type === 'straight') {
        ctx.beginPath()
        ctx.moveTo(fromNode.x, fromNode.y)
        ctx.lineTo(toNode.x, toNode.y)
        ctx.stroke()
      } else {
        // 绘制电路板风格的直角连接
        ctx.beginPath()
        ctx.moveTo(fromNode.x, fromNode.y)
        
        const midX = (fromNode.x + toNode.x) / 2
        if (Math.random() > 0.5) {
          ctx.lineTo(midX, fromNode.y)
          ctx.lineTo(midX, toNode.y)
        } else {
          const midY = (fromNode.y + toNode.y) / 2
          ctx.lineTo(fromNode.x, midY)
          ctx.lineTo(toNode.x, midY)
        }
        
        ctx.lineTo(toNode.x, toNode.y)
        ctx.stroke()

        // 绘制线路装饰
        this.drawCircuitDecorations(ctx, fromNode, toNode, midX)
      }
    })

    // 绘制节点
    this.nodes.forEach(node => {
      if (node.type === 'chip') {
        this.drawChip(ctx, node)
      } else {
        this.drawNode(ctx, node)
      }
    })
  }

  drawCircuitDecorations(ctx, from, to, midX) {
    // 绘制小装饰（焊点等）
    const decorCount = Math.floor(Math.random() * 3) + 1
    for (let i = 0; i < decorCount; i++) {
      const t = (i + 1) / (decorCount + 1)
      const x = from.x + (to.x - from.x) * t
      const y = from.y + (to.y - from.y) * t

      ctx.fillStyle = 'rgba(0, 255, 150, 0.5)'
      ctx.beginPath()
      ctx.arc(x, y, 2, 0, Math.PI * 2)
      ctx.fill()
    }
  }

  drawNode(ctx, node) {
    // 绘制圆形节点
    const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.size)
    gradient.addColorStop(0, 'rgba(0, 255, 200, 0.8)')
    gradient.addColorStop(0.5, 'rgba(0, 255, 150, 0.5)')
    gradient.addColorStop(1, 'rgba(0, 255, 100, 0.2)')

    ctx.shadowBlur = 10
    ctx.shadowColor = 'rgba(0, 255, 150, 0.6)'
    ctx.fillStyle = gradient
    ctx.beginPath()
    ctx.arc(node.x, node.y, node.size, 0, Math.PI * 2)
    ctx.fill()

    // 中心点
    ctx.shadowBlur = 0
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
    ctx.beginPath()
    ctx.arc(node.x, node.y, node.size * 0.3, 0, Math.PI * 2)
    ctx.fill()
  }

  drawChip(ctx, node) {
    const size = node.size * 2

    ctx.save()
    ctx.translate(node.x, node.y)

    // 芯片主体
    ctx.shadowBlur = 10
    ctx.shadowColor = 'rgba(0, 200, 255, 0.5)'
    ctx.fillStyle = 'rgba(20, 40, 60, 0.8)'
    ctx.strokeStyle = 'rgba(0, 200, 255, 0.6)'
    ctx.lineWidth = 2
    ctx.fillRect(-size / 2, -size / 2, size, size)
    ctx.strokeRect(-size / 2, -size / 2, size, size)

    // 芯片引脚
    ctx.shadowBlur = 0
    ctx.fillStyle = 'rgba(0, 255, 150, 0.6)'
    const pinCount = 4
    const pinSize = 3
    for (let i = 0; i < pinCount; i++) {
      // 左侧引脚
      ctx.fillRect(-size / 2 - pinSize, -size / 2 + (i + 0.5) * (size / pinCount) - pinSize / 2, pinSize, pinSize)
      // 右侧引脚
      ctx.fillRect(size / 2, -size / 2 + (i + 0.5) * (size / pinCount) - pinSize / 2, pinSize, pinSize)
    }

    // 芯片标识
    ctx.fillStyle = 'rgba(0, 255, 200, 0.4)'
    ctx.fillRect(-size * 0.3, -size * 0.3, size * 0.6, size * 0.6)

    ctx.restore()
  }
}

class Pulse {
  constructor(canvas, circuits) {
    this.canvas = canvas
    this.circuits = circuits
    this.reset()
  }

  reset() {
    if (this.circuits.length === 0) return
    
    const circuit = this.circuits[Math.floor(Math.random() * this.circuits.length)]
    if (circuit.connections.length === 0) {
      this.circuit = null
      return
    }
    
    this.circuit = circuit
    this.connection = circuit.connections[Math.floor(Math.random() * circuit.connections.length)]
    this.progress = 0
    this.speed = 0.02
    this.size = Math.random() * 5 + 3
  }

  update() {
    if (!this.circuit || !this.connection) {
      this.reset()
      return
    }

    this.progress += this.speed
    if (this.progress > 1) {
      this.reset()
    }
  }

  draw(ctx) {
    if (!this.circuit || !this.connection) return

    const fromNode = this.circuit.nodes[this.connection.from]
    const toNode = this.circuit.nodes[this.connection.to]

    const x = fromNode.x + (toNode.x - fromNode.x) * this.progress
    const y = fromNode.y + (toNode.y - fromNode.y) * this.progress

    const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.size * 2)
    gradient.addColorStop(0, 'rgba(0, 255, 255, 1)')
    gradient.addColorStop(0.5, 'rgba(0, 255, 200, 0.6)')
    gradient.addColorStop(1, 'rgba(0, 255, 150, 0)')

    ctx.shadowBlur = 15
    ctx.shadowColor = 'rgba(0, 255, 200, 0.8)'
    ctx.fillStyle = gradient
    ctx.beginPath()
    ctx.arc(x, y, this.size, 0, Math.PI * 2)
    ctx.fill()
  }
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 创建电路
  circuits = []
  const circuitCount = Math.floor((canvas.width * canvas.height) / 100000)
  for (let i = 0; i < circuitCount; i++) {
    circuits.push(new Circuit(canvas))
  }

  // 创建脉冲
  pulses = []
  for (let i = 0; i < 15; i++) {
    pulses.push(new Pulse(canvas, circuits))
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  // 深色电路板背景
  const gradient = ctx.createLinearGradient(0, 0, canvasRef.value.width, canvasRef.value.height)
  gradient.addColorStop(0, '#0a1520')
  gradient.addColorStop(0.5, '#0d1a25')
  gradient.addColorStop(1, '#0a1520')
  
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 绘制电路
  circuits.forEach(circuit => {
    circuit.draw(ctx)
  })

  // 更新和绘制脉冲
  pulses.forEach(pulse => {
    pulse.update()
    pulse.draw(ctx)
  })

  animationFrame = requestAnimationFrame(animate)
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
  
  // 重新生成电路
  circuits = []
  const circuitCount = Math.floor((canvasRef.value.width * canvasRef.value.height) / 100000)
  for (let i = 0; i < circuitCount; i++) {
    circuits.push(new Circuit(canvasRef.value))
  }
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.circuit-board-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a1520;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

